<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo0102-路由02-动态路由</title>
</head>
<script src="../libs/vue.js"></script>
<script src="../libs/vue-router.3.5.3.js"></script>

<style>
    .container{
        width: 100%;
        min-width: 320px;
        max-width: 640px;

        margin:0 auto;
    }
</style>
<body> 
  <div id="app">
    <h1>Hello dynamic route !</h1> 
    <!-- 路由出口 -->
    <!-- 路由匹配到的组件将渲染在这里 -->
    <router-view></router-view>
  </div>
</body>

<script>
/*
动态路由：
/user/foo/profile                     /user/foo/posts
+------------------+                  +-----------------+
| User             |                  | User            |
| +--------------+ |                  | +-------------+ |
| | Profile      | |  +------------>  | | Posts       | |
| |              | |                  | |             | |
| +--------------+ |                  | +-------------+ |
+------------------+                  +-----------------+
*/


// 0. 如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter)

// 1. 定义 (路由) 组件。
// 可以从其他文件 import 进来
const User = {
  template: `
    <div class="user">
      <h2>User {{ $route.params.id }}</h2>
      <router-view></router-view>
    </div>
  `
}
const UserSubDefault = {
  template: `
    <div>
      <h3>这是user 默认sub页 {{ $route.params.id }}</h3>
    </div>
  `
}
const UserProfile = {
  template: `
    <div>
      <h3>User Profile {{ $route.params.id }}</h3>
    </div>
  `
}
const UserPosts = {
  template: `
    <div>
      <h3>User Posts {{ $route.params.id }}</h3>
    </div>
  `
}

// 2. 定义路由
// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器，
// 或者，只是一个组件配置对象。
// 我们晚点再讨论嵌套路由。
const routes = [
  { path: '/user/:id', component: User ,
  children: [
        {
          /*
          此时，基于上面的配置，当你访问 /user/foo 时，User 的出口是不会渲染任何东西，
          这是因为没有匹配到合适的子路由。如果你想要渲染点什么，可以提供一个 空的 子路由：
          注意，这个空路由，最好也默认写在第一个位置
          */
          path: '',
          component: UserSubDefault
        },
        {
          // 当 /user/:id/profile 匹配成功，
          // UserProfile 会被渲染在 User 的 <router-view> 中
          path: 'profile',
          component: UserProfile
        },
        {
          // 当 /user/:id/posts 匹配成功
          // UserPosts 会被渲染在 User 的 <router-view> 中
          path: 'posts',
          component: UserPosts
        }
      ]
  }
]

// 3. 创建 router 实例，然后传 `routes` 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
const router = new VueRouter({
  routes // (缩写) 相当于 routes: routes
});

// 4. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由，
// 从而让整个应用都有路由功能
const app = new Vue({
  router
}).$mount('#app')

// 现在，应用已经启动了！
</script>
</html>